<script setup>
// import axios from "axios"
import axios from "axios"
import HelloAxios from "./components/HelloAxios.vue"
// // 设置基础url，请求路径的前缀
// axios.defaults.baseURL = "/api"
// // 设置超时时间为3秒
// axios.defaults.timeout = 3000

// 创建axios实例，一个实例一份配置
const commonAxios = axios.create({
	// 设置基础url，请求路径的前缀
	baseURL: "/api",
	// 设置超时时间为3秒
	timeout: 3000,
})

const specialAxios = axios.create({
	// 设置基础url，请求路径的前缀
	baseURL: "/api",
	// 设置超时时间为3秒
	timeout: 2000,
})

const getSongs = () => {
	// 默认是get请求，参数拼接到URL中，这里传入axios的参数是一个配置config，对象类型
	// axios({
	// 	// 播放URL：http://music.163.com/song/media/outer/url?id=454828887.mp3
	// 	// 歌曲API：https://music.163.com/api/song/enhance/player/url?id=454828887&ids=[454828887]&br=3200000
	// 	url: "/enhance/player/url?id=454828887&ids=[454828887]&br=3200000",
	// 	// 歌词API：https://music.163.com/api/song/lyric?os=pc&id=454828887&lv=-1&kv=-1&tv=-1
	// }).then((res) => {
	// 	console.log(res)
	// })

	// 参数以params方式单独存在
	// axios({
	// 	url: "/enhance/player/url",
	//     // 方法类型
	// 	method: "GET",
	//     // 参数值
	// 	params: {
	// 		id: "454828887",
	// 		ids: "454828887",
	// 		br: "3200000",
	// 	},
	// }).then((res) => {
	// 	console.log(res)
	// })

	// 并发请求测试（多个请求），和Promise.all()方法类似
	// axios
	// 	.all([
	// 		axios({
	// 			url: "/enhance/player/url",
	// 			// 方法类型
	// 			method: "GET",
	// 			// 参数值
	// 			params: {
	// 				id: "454828887",
	// 				ids: "454828887",
	// 				br: "3200000",
	// 			},
	// 		}),
	// 		axios({
	// 			url: "/lyric",
	// 			// 方法类型
	// 			method: "GET",
	// 			// 参数值
	// 			params: {
	// 				os: "pc",
	// 				id: "454828887",
	// 				lv: "-1",
	// 				kv: "-1",
	// 				tv: "-1",
	// 			},
	// 		}),
	// 	])
	// 	// 这里then中还可以使用axios.spread拆分结果
	// 	.then((results) => {
	// 		console.log(results)
	// 	})

	// axios实例commonAxios
	commonAxios({
		url: "/enhance/player/url",
		// 方法类型
		method: "GET",
		// 参数值
		params: {
			id: "454828887",
			ids: "[454828887]",
			br: "3200000",
		},
	})
		// 这里then中还可以使用axios.spread拆分结果
		.then((result) => {
			console.log(result)
		})
}
</script>

<template>
	<h1>Axios</h1>
	<button @click="getSongs">发送请求</button>
	<hello-axios />
</template>

<style></style>
